<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">

          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
<!--                    <form class="layui-form layui-col-space5">-->
                    <div class="layui-form layui-input-inline" lay-filter="myDiv">
                        <select name="" id="" class="" lay-filter="mySelect">
                            <option value="ALL">全部</option>
                            <option value="DONE">已完成</option>
                            <option value="DOING">使用中</option>
                            <option value="NOTDONE">未完成</option>
                            <option value="CANCEL">取消</option>
                        </select>
                    </div>

<!--                        <div class="layui-inline layui-show-xs-block">-->
<!--                            <input type="text" name="username"  placeholder="筛选" autocomplete="off" class="layui-input">-->
<!--                        </div>-->
<!--                        <div class="layui-inline layui-show-xs-block">-->
<!--                            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>-->
<!--                        </div>-->
<!--                    </form>-->
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" id="add" ><i class="layui-icon"></i>添加</button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="demo" lay-filter="test"></table>
                </div>
                <div class="layui-card-body ">

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/api.js"></script>
<script  th:inline="javascript">
    var element = layui.element;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;

    form.on('select(mySelect)', function (data) {

        let param = new Object();
        param['status'] = data.value;
        table.reload('demo', {
            url: '/userRecord/listAll',
            method: "get",
            where: param
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    })
    table.render({
        elem: '#demo',
        url:'/userRecord/listAll',
        method:'get',
        parseData: function(res){ //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.totalElements, //解析数据长度
                "data": res.data.content //解析数据列表
            };
        },
        cols: [
            [{type:'numbers'}
               , {field: 'id', title: 'ID', width: 200}
                , {field: 'loginName', title: '订单用户名', width: 150 ,templet: '<div>{{d.user.loginName}}</div>'}
                , {field: 'mobile', title: '手机号', width: 150,templet: '<div>{{d.user.mobile}}</div>'}
                , {field: 'sex', title: '性别', width: 100,templet: '<div>{{d.user.sex}}</div>'}
                , {field: 'equipmentId', title: '设备ID', width: 150}
                , {field: 'amount', title: '消费金额', width: 100}
                , {field: 'startTime', title: '开始时间', width: 200}
                , {field: 'endTime', title: '结束时间', width: 200}
                , {field: 'recordStatus', title: '状态', width: 100,templet:function (obj) {
                    let status="已完成";
                    if (obj.recordStatus==='DOING') {
                        console.log(obj.recordStatus)
                        status="使用中";
                    }else if(obj.recordStatus==='CANCEL'){
                        console.log(obj.recordStatus)
                        status="取消";
                    }else if(obj.recordStatus==='NOTDONE'){
                        console.log(obj.recordStatus)
                        status="未完成";
                    }
                    else if(obj.recordStatus==='PRE'){
                        console.log(obj.recordStatus)
                        status="预约中";
                    }else{
                        console.log(obj.recordStatus)
                        status="已完成";

                    }
                   return status;
                }}
                ,{fixed: 'right', width:150, align:'right', toolbar: '#barDemo'}
            ]
        ]

        , skin: 'line'//表格风格
        , title:"分类"
        , even: true
        , page: true //是否显示分页
        , limits: [10, 15]
        , limit: 10 //每页默认显示的数量
    });

    $('#add').on("click",function(){

        $('#id').val("");
        $('#userId').val("");
        $('#equipmentId').val("");
        $('#gmtCreated').val("");
        $('#amount').val("");

        layer.open({
            title:"添加订单",
            //调整弹框的大小
            area:['600px','400px'],
            shadeClose:true,//点击旁边地方自动关闭
            //动画
            anim:2,
            //弹出层的基本类型
            type: 1,
            //刚才定义的弹窗页面
            content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

        });
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        console.log(form)

        if(obj.event === 'del'){
            layer.confirm('真的删除行么',async function(index){
                obj.del();
                const  result = await requests(`/user/del?id=${obj.data.id}`);
                if (result.isSuccess){
                    layer.msg("删除成功",{icon: 1,time:1000 });
                }
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            //表单回显

            $('#id').val(obj.data.id);
            $('#userId').val(obj.data.user.id);
            $('#equipmentId').val(obj.data.equipmentId);
            $('#gmtCreated').val(obj.data.gmtCreated);
            $('#amount').val(obj.data.amount);


            layer.open({
                title:"编辑订单",
                //调整弹框的大小
                area:['600px','400px'],
                shadeClose:true,//点击旁边地方自动关闭
                //动画
                anim:2,
                //弹出层的基本类型
                type: 1,
                //刚才定义的弹窗页面
                content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

            });
        }
    });

    //监听提交
    form.on('submit(formSubmit)',async function(data){

        const subData = data.field;
        //自定义验证规则

        const result = await requests("/userRecord/add","POST",subData);
        console.log(result);
        if (result){
            layer.msg("提交成功",{icon: 1,time:1000 });
        }
    });

    form.render();
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1',
             type:"datetime"//指定元素
        });
    });
</script>
<div style="display: none; margin-top:20px" id="form" class="form">
    <form class="layui-form" lay-filter="storeForm">
        <div style="display: none" class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" id="id" name="id"  autocomplete="off" placeholder="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" id="userId" name="userId" lay-verify="title" autocomplete="off" placeholder="请输入用户ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备ID</label>
            <div class="layui-input-inline">
                <input type="text" id="equipmentId" name="equipmentId" lay-verify="title" autocomplete="off" placeholder="请输入设备ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-inline">
                <input type="number" name="amount" id="amount" placeholder="请输入手机号" lay-verify="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text" name="gmtCreated" class="layui-input" id="test1">

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</html>